import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './SellOnlineList.less'

import { CONFIG } from 'api/config'
import LazyImage from 'base/LazyImage/LazyImage'
import { priceFormat } from 'common/js/filter'
import { PullToRefresh } from 'antd-mobile'

// import {testContext} from 'context/context'

export default class SellOnlineList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgBaseURL: CONFIG.IMGURL,
      refreshing: false,
      down: false,
      height: document.documentElement.clientHeight
    }
  }
  // static contextType = testContext

  getMoreData = () => {
    let levelLinkTab = this.props.levelLinkTab
    let sellOnline = levelLinkTab.props.sellOnline
    console.log(sellOnline)
    sellOnline.getMoreCommodityList()
  }

  componentDidMount() {
    console.log(this.context)
    // console.log(ReactDOM.findDOMNode(this.ptr).offsetTop)
    // const h = document.getElementsByClassName('sell-online-list')[0].clientHeight
    const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
    // console.log(hei)
    setTimeout(() => this.setState({
      height: hei
    }), 0)
  }

  render() {
    return (
      <div className="sell-online-list">
        <PullToRefresh
          damping={100}
          ref={el => this.ptr = el}
          style={{
            // height: this.state.height,
            height: '100%',
            overflow: 'auto'
          }}
          indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
          direction={this.state.down ? 'down' : 'up'}
          refreshing={this.state.refreshing}
          onRefresh={this.getMoreData}
        >
          <ul>
            {this.props.commodityList.map((val, key) => (
              <li key={key}>
                <div className="item">
                  <div className="avatar">
                    <LazyImage src={val.fileAddress}></LazyImage>
                  </div>
                  <div className="desc">
                    <div className="name">{val.name}</div>
                    <div><span>规格：</span>{val.unitName}</div>
                    <div className="price">{priceFormat(val.sellPrice)}</div>
                  </div>
                </div>
              </li>
            ))}
          </ul>

        </PullToRefresh>
        
        {/* <ul>
          {this.props.commodityList.map((val, key) => (
            <li key={key}>
              <div className="item">
                <div className="avatar">
                  <LazyImage src={this.state.imgBaseURL + val.fileAddress}></LazyImage>
                </div>
                <div className="desc">
                  <div>{val.name}</div>
                  <div><span>规格：</span>{val.unitName}</div>
                  <div className="price">{priceFormat(val.sellPrice)}</div>
                </div>
              </div>
            </li>
          ))}
        </ul> */}
      </div>
    )
  }
}
